<template>
	<view class="content">
		<view class="top">
		<view class="top_left" @tap="hui"><image src="/static/left2.png" class="left_icon" /></view>
		<view class="header">我的银行卡</view>
		<view class="top_right" @tap="add"><image src="/static/jiahao1.png" class="right_icon"/></view>
		</view>
		<view class="tiao"></view>
		<view class="tou">
			<view class="row" v-for="(row,index) in couponValidList"  :key="index">
				<view class="dur" @click="checkbank(row)">
					<view class="title">
						<text  v-if="row.default==2" class="tag">默认</text>
						{{row.bankname}}
					</view>
					<view class="term">
						{{row.holder}}
					</view>
					<view class="kahao">
						<text v-for="(a,b) in row.cardnumber.length-4 ">*</text>
						{{row.cardnumber.substring(row.cardnumber.length-4)}}
					</view>
				</view>
				<view class="jiangli" @click="checkbank(row)">
						<!-- <img :src="couponValidList.images" alt=""> -->
						<image class="images" src="/static/listbank.png"></image>
					</view>
				<view class="del" @tap="del(row.id)">
						<!-- <img :src="couponValidList.images" alt=""> -->
						<image class="del_img" src="/static/del.png"></image>
					</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponValidList:[],
			}
		},
		
		onLoad() {
			// 获取银行卡信息
			this.suxin()
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onShow() {
			this.suxin()
		},
		methods: {
			suxin(){
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/member/mem_bank',
					header:{authtoken:this.$store.state.token},
					method:'POST',
					success:(res)=>{
						console.log("请求成功",res)
						this.couponValidList=res.data.data
						 uni.stopPullDownRefresh();
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
			},
			onPullDownRefresh: function() {
				this.suxin()
			},
			checkbank:function(item){
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().banknew = item;
					uni.navigateBack()
				
			},
			hui:function(){
				uni.navigateBack({
				})
			},
			add:function(){
				uni.navigateTo({
					url:'../add_bank/index'
				})
			},
			del:function(e){
				uni.showModal({
				    title: '提示',
				    content: '确认删除该银行卡吗？',
				    success:(res)=>{
						if (res.confirm) {
							console.log("你点击了确认")
						  uni.request({
						  	url:'http://tuiguang.yiyunoto.com/api/member/delmybank',
						  	header:{authtoken:this.$store.state.token},
						  	method:'POST',
						  	data:{bankid:e},
						  	success:(res)=>{
						  		this.suxin()
						  		this.$api.msg(res.data.msg)
						  		console.log("请求成功",res)
						  	},
						  	fail:(res)=>{
						  		console.log("请求失败",res)
						  	}
						  })
						}
							   
				    }
				});
				
			},
			switchType(type) {
				if (this.typeClass == type) {
					return;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.typeClass = type;
				this.subState = this.typeClass == '' ? '' : 'show' + type;
				setTimeout(() => {
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass == 'valid' ? '' : this.subState;
				}, 200)
			},
			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}
	.top{
		width: 100%;
		height: 100upx;
		padding-top: 50upx;
		box-sizing: border-box;
	}
	.top_left{
		width: 20%;
		height: 100%;
		float: left;
		
	}
	.left_icon{
		width: 20upx;
		height: 40upx;
		padding-top: 20upx;
		padding-left: 20upx;
	}
	.top_right{
		width: 20%;
		height: 100%;
		float: right;
	}
	.right_icon{
		width: 40upx;
		height: 40upx;
		padding-top: 20upx;
		padding-left: 20upx;
	}
	.header {
		width: 60%;
		height: 100%;
		text-align: center;
		float: left;
	}

	.tiao {
		width: 100%;
		height: 1upx;
		background: #E6E6E6;
		position: absolute;
		top: 122upx;
	}

	.tou {
		padding-top: 42upx;
		float: left;
		
	}
/* 默认标头 */
	.tag{
		font-size: 24upx;
		color: #ffb4c7;
		margin-right: 10upx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4upx;
		padding: 4upx 10upx;
		line-height: 1;
	}
	
	.dur {
		width: 60%;
		float: left;
		margin-left: 22upx;
		padding-left: 30upx;
	}

	.row {
		width: 690upx;
		height: 179upx;
		background: #F1F1F1;
		border-radius: 8upx;
		margin-left: 30upx;
		margin-top: 14upx;
	}
	.title {
		padding-left: 0upx;
		padding-top: 28upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(0, 0, 0, 1);
	}
	.term {
		padding-left: 0upx;
		padding-top: 7upx;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(105, 105, 105, 1);
	}
	.kahao {
		padding-left: 0upx;
		padding-top: 19upx;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(105, 105, 105, 1);
	}

	.jiangli {
		float: left;
		width:20%;
		margin-top: 40upx;
	}
	
	.images {
		width:100upx;
		height:100upx;
	}
	.del {
		float: left;
		width:10%;
		line-height: 179upx;
		
		box-sizing: border-box;
	}
	
	.del_img {
		
		width:50upx;
		height:50upx;
	}
</style>
